<template>
    <div class="madp-customer-statistics">
        <UnitTitle title="总览" />
        <statistics-card style="margin-bottom:20px" :cardInfo="cardInfo" :cardData="basicInfo" />
        <div id="madp-chart-e5"></div>
        <UnitTitle title="部门完成情况" />
        <div class="box">
            <el-button v-show="tableType == 2" class="btns" type="primary" @click="back">返回总行</el-button>
        </div>
        <el-table
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            stripe
            v-loading="loading"
            :data="tableData"
        >
            <el-table-column prop="name" :label="tableType == 1 ? '分行部门' : '支行部门'"></el-table-column>
            <el-table-column prop="crmCustTotalCount" label="CRM客户总数"></el-table-column>
            <el-table-column prop="distributedCount" label="分配客户数"></el-table-column>
            <el-table-column prop="undistributedCount" label="未分配客户数"></el-table-column>
            <el-table-column prop="addedCount" label="已添加客户数"></el-table-column>
            <el-table-column prop="addedPercentage" label="添加完成率"></el-table-column>
            <el-table-column label="操作" v-if="tableType != 2">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleView(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="madp-pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
    </div>
</template>
<script>
import StatisticsCard from '@/components/statistics-card/';
import { getCrmStatistics, getCrmStatisPage } from '@/api/customer/customer-cms';
export default {
    name: 'madp-customer-statistics',
    components: {
        StatisticsCard
    },
    data() {
        return {
            // 分行id
            fenHangDeptId: '',
            //柱状图数据
            chartInfo: {
                color: ['#ED5555'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为:'line' | 'shadow'
                    }
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '12%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['CRM客户总数', '分配客户数', '未分配客户数', '已添加客户数'],
                        axisTick: false //去除X轴刻度线
                    }
                ],
                yAxis: [
                    {
                        name: '人数',
                        type: 'value',
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '客户数据统计',
                        type: 'bar',
                        barWidth: 15,
                        data: []
                    }
                ]
            },
            loading: false, // 表格loading
            tableData: [], // 表格数据
            // 分页数据
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 卡片信息
            cardInfo: [
                {
                    label: 'CRM客户总数',
                    key: 'crmCustTotalCount',
                    color: '#FFD700'
                },
                {
                    label: '分配客户数',
                    key: 'distributedCount',
                    color: 'rgb(123, 215, 0)'
                },
                {
                    label: '未分配客户数',
                    key: 'undistributedCount',
                    color: 'rgb(23, 115, 70)'
                },
                {
                    label: '已添加客户数',
                    key: 'addedCount',
                    color: '#FF8C00'
                },
                {
                    label: '添加完成率',
                    key: 'addedPercentage',
                    color: 'rgb(223, 55, 70)'
                }
            ],
            // 基础信息
            basicInfo: {},
            // 表格type
            tableType: 1,
            // 部门id
            deptId: ''
        };
    },
    created() {
        this.deptId = this.$store.getters.userInfo.deptId;
        this.getList();
    },
    mounted() {
        this.init();
    },
    methods: {
        // 初始化
        init() {
            this.infoLoading = true;
            let depId = this.deptId;
            if (this.fenHangDeptId) depId = this.fenHangDeptId;
            getCrmStatistics(depId)
                .then((res) => {
                    this.infoLoading = false;
                    if (res.data.code != 0) return;
                    this.basicInfo = res.data.data;
                    let { crmCustTotalCount, distributedCount, undistributedCount, naddedCount } = res.data.data;
                    this.chartInfo.series[0].data = [crmCustTotalCount, distributedCount, undistributedCount, naddedCount];
                    this.initChart();
                })
                .catch(() => {
                    this.infoLoading = false;
                });
        },
        // 查看详情
        handleView(data) {
            let { id } = data;
            this.fenHangDeptId = id;
            this.page.current = 1;
            this.getList();
            this.init();
        },
        // 绘制图表
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('madp-chart-e5'));
            myChart.setOption(this.chartInfo);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        // 返回
        back() {
            this.fenHangDeptId = '';
            this.tableType = 1;
            this.getList();
            this.init();
        },
        // 查询
        getList(data) {
            if (!data) {
                this.page.current = 1;
            }
            let obj = {
                current: this.page.current,
                size: this.page.size,
                deptId: this.deptId
            };
            if (this.fenHangDeptId) {
                obj.deptId = this.fenHangDeptId;
                this.tableType = 2;
            }
            this.loading = true;
            getCrmStatisPage(obj)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code != 0) return;
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 修改当前页显示条数
        handleSizeChange(size) {
            this.page.size = size;
            this.page.current = 1;
            this.getList(1);
        },
        // 修改当前页码
        handleCurrentChange(current) {
            this.page.current = current;
            this.getList(1);
        }
    }
};
</script>
<style scoped lang="scss">
#madp-chart-e5 {
    width: 100%;
    height: 650px;
    margin: 15px auto;
}
.box {
    position: relative;
}
.btns {
    position: absolute;
    top: -48px;
    right: 0;
}
</style>
